<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>评价</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{padding:12px;}
        .content .head{display: -webkit-box;display: box;}
        .content .head .left{width: 80px;font-size: 14px;color: #333;}
        .content .head .right{box-flex: 1;-webkit-box-flex: 1;}
        .content .head .right .face{display: -webkit-box;display: box;}
        .content .head .right .face div{box-flex: 1;-webkit-box-flex: 1;color: #666;}
        .content .head .right .face div i{font-size: 20px;}
        .content .head .right .face div span{font-size: 14px;margin-left: 5px;vertical-align: text-top;}
        .content .head .right textarea{display: block;width: 100%;height: 150px;border: 1px solid #ccc;
            border-radius: 3px;margin-top: 10px;padding:10px;font-size: 14px;color: #333;}
        .star-list{margin-top: 15px;}
        .star-list ul{}
        .star-list ul li{display: -webkit-box;display: box;line-height: 40px;}
        .star-list ul li .left{width: 80px;font-size: 14px;color: #333;}
        .star-list ul li .right{box-flex: 1;-webkit-box-flex: 1;}
        .star-list ul li .right i{font-size: 28px;line-height: 30px;color: #ffc10c;}

        footer{width: 80%;margin-left: 10%;margin-top: 15px;}
        footer input{display: block;width: 100%;-webkit-appearance: none;height: 45px;line-height: 45px;color: #fff;background-color: #ffc10c;font-size: 18px;border-radius: 4px;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">评价</div>
    </div>
</header>
<form action="../html/task_comment.html">
    <div class="content">
        <div class="head">
            <div class="left">评价:</div>
            <div class="right">
                <div class="face">
                    <div class="good"><i class="iconfont icon-haoping"></i><span>好评</span></div>
                    <div class="ok"><i class="iconfont icon-zhongping"></i><span>中评</span></div>
                    <div class="bad"><i class="iconfont icon-chaping"></i><span>差评</span></div>
                </div>
                <textarea></textarea>
            </div>
        </div>
    </div>
    <footer>
        <input type="submit"/>
    </footer>
</form>
</body>
<script>
    $('.face div').click(function(){
        $(this).css('color','#ffc10c').siblings().css('color','');
    })
</script>
</html>